<template>
  <div class="schoolYear">
    <div class="schoolYear-top">
      <div class="schoolYear-title">
        <div class="addSchoolYear">
          <el-button
            type="primary"
            class="newAdd"
            icon="el-icon-plus"
            @click="addCollege"
          >
            新增学年学期
          </el-button>
        </div>
        <div class="searchRight">
          <div class="searchContent">
            <el-input
              v-model="searchInput"
              :maxlength="200"
              suffix-icon="el-icon-search"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div class="moreBtn">
            <el-button
              type="primary"
              @click="searchBtn"
              class="searchBtn"
              icon="el-icon-search"
              >搜索</el-button
            >
            <el-button
              type="primary"
              @click="refreshBtn"
              class="refreshBtn"
              icon="el-icon-refresh"
              >重置</el-button
            >
            <el-button
              type="primary"
              class="moreDelete"
              @click="removeSchoolYear"
            >
              <i class="el-icon-close"></i>
              批量删除
            </el-button>
            <!-- <img class="remove" @click="removeSchoolYear" src="../../assets/educational-img/moreDelete.png" alt=""> -->
          </div>
        </div>
      </div>
    </div>
    <div class="schoolYearContent">
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="selectionChange"
          v-loading="isLoading"
          :row-class-name="getRowClassName"
          @row-click="toggleRowExpansion"
          ref="expandTable"
          element-loading-text="加载中，请稍后..."
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="" prop="" width="50"> </el-table-column>
          <el-table-column type="expand">
            <template slot-scope="props">
              <div v-show="props.row.schoolSemester.length > 0">
                <div
                  class="infoTable"
                  v-for="(item, index) in props.row.schoolSemester"
                  :key="index"
                >
                  <div class="schoolOrSemester">
                    <div>
                      {{ item.remarkSchool }}
                    </div>
                  </div>
                  <div class="time">
                    <span>{{ item.beginDateSchool }}~</span>

                    <span>{{ item.endDateSchool }}</span>
                  </div>
                </div>
              </div>
              <!-- <div v-else>暂无学期</div> -->
            </template>
          </el-table-column>
          <el-table-column label="学年学期" prop="schoolYearStr">
          </el-table-column>
          <el-table-column label="时间" prop="time">
            <template slot-scope="props">
              <div class="infoTableTime">
                <!-- {{props.row}} -->
                <span> {{ props.row.beginDate }}</span>
                ~
                <span> {{ props.row.endDate }}</span>
                <!-- <div class="startTime">
                      {{ props.row.startTime }}
                    </div>
                    <div class="endTime">
                      {{ props.row.endTime }}
                    </div> -->
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="启用状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#C2C2C2"
                active-value="0"
                inactive-value="1"
                @change="switchChange(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <span
                class="icon edit"
                @click="handleEdit(scope.row)"
              >编辑</span>
              <span
                class="icon del"
                @click="handleDelete(scope.row)"
              >删除</span>
              <!-- <img
                class="edit"
                @click="handleEdit(scope.row)"
                src="../../assets/edit.png"
                alt=""
              />
              <img
                class="del"
                @click="handleDelete(scope.row)"
                src="../../assets/del.png"
                alt=""
              /> -->
              <!-- <i @click="handleEdit(scope.$index, scope.row)" class="el-icon-edit-outline"></i>
                            <i @click="handleDelete(scope.$index, scope.row)" class="el-icon-delete"></i> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="10"
        prev-text="上一页"
        next-text="下一页"
        layout="prev, pager, next, jumper"
        ref="pagination"
        :total="total"
      >
      </el-pagination>
      <el-button class="sure" type="primary">确定</el-button>
    </div>
    <!-- 弹框 -->
    <el-dialog
      title="添加学年学期"
      :visible.sync="isSchoolYearFlag"
      width="800px"
      height="500px"
    >
      <div class="addInput">
        <div class="schoolYearText">
          <p class="addSchoolYear">学年</p>
        </div>
        <div class="addSchoolYearName">
          <p class="schoolYear-left">学年名称：</p>
          <el-input
            v-model="schoolYearValue"
            placeholder="请输入学年名称"
          ></el-input>
        </div>
      </div>
      <div class="semesterInput">
        <div class="semesterText">
          <p class="semester">学期</p>
        </div>
        <el-button class="addSemester" @click="addSemester" icon="el-icon-plus"
          >新增学期</el-button
        >
      </div>
      <div class="infoSemester">
        <div
          class="infoSemester-top"
          v-for="(item, index) in semesterNameArr"
          :key="index"
        >
          <div class="semesterName">
            <p>学期名称：</p>
            <el-input
              v-model="item.remarkSchool"
              placeholder="请输入学期名称"
            ></el-input>
          </div>
          <div class="semesterTime">
            <p>学期时间：</p>
            <div class="date">
              <!-- value-format="yyyy-MM-dd" -->
              <el-date-picker
                v-model="item.beginDateSchool"
                value-format="yyyy-MM-dd"
                placeholder="开始时间"
              >
              </el-date-picker>
              <p>—</p>
              <el-date-picker
                v-model="item.endDateSchool"
                value-format="yyyy-MM-dd"
                placeholder="结束时间"
              >
              </el-date-picker>
            </div>
          </div>
          <div @click="removeSchool(index)">删除</div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="isSchoolYearFlag = false"
          >取 消</el-button
        >
        <el-button class="determine" type="primary" @click="addSchoolYearBtn"
          >确 定</el-button
        >
      </div>
      <transition name="fade">
        <p class="message" v-if="isShowMsg">信息不能为空</p>
      </transition>
    </el-dialog>

    <!-- 修改学年学期 -->
    <el-dialog
      title="修改学年学期"
      :visible.sync="semesteFlag"
      width="800px"
      height="500px"
    >
       <el-dialog
        title="添加学期"
        :visible.sync="infoSemesteFlag"
        width="700px"
        height="200px"
        append-to-body
        style="marginTop:100px"
      >
        <div class="xueqi">
      <div class="infoSemesterDetail">
        <div
          class="infoSemesterDetail-top"
        >
          <div class="semesterName">
            <p>学期名称：</p>
            <el-input
              v-model="infoSemester.remarkSchool"
              placeholder="请输入学期名称"
            ></el-input>
          </div>
          <div class="semesterTime">
            <p>学期时间：</p>
            <div class="date">
              <el-date-picker
                v-model="infoSemester.beginDateSchool"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始时间"
              >
              </el-date-picker>
              <p>—</p>
              <el-date-picker
                v-model="infoSemester.endDateSchool"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束时间"
              >
              </el-date-picker>
            </div>
          </div>
          
        </div>

      </div>
        <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="infoSemesteFlag = false"
          >取 消</el-button
        >
        <el-button class="determine" type="primary" @click="infoSemesterDetail"
          >确 定</el-button
        >
      </div>
        </div>
      </el-dialog>
      
      <div class="addInput">
        <div class="schoolYearText">
          <p class="addSchoolYear">学年</p>
        </div>
        <div class="addSchoolYearName">
          <p class="schoolYear-left">学年名称：</p>
          <el-input
            v-model="schoolYearValue"
            placeholder="请输入学年名称"
          ></el-input>
        </div>
      </div>
      <div class="semesterInput">
        <div class="semesterText">
          <p class="semester">学期</p>
        </div>
        <el-button
          class="addSemester"
          @click="editInfoAddSemester"
          icon="el-icon-plus"
          >新增学期</el-button
        >
      </div>
      <div class="infoSemester">
        <div
          class="infoSemester-top"
          v-for="(it, i) in editSchoolSemester"
          :key="i"
        >
          <div class="semesterName">
            <p>学期名称：</p>
            <el-input
              v-model="it.remarkSchool"
              placeholder="请输入学期名称"
            ></el-input>
          </div>
          <div class="semesterTime">
            <p>学期时间：</p>
            <div class="date">
              <el-date-picker
                v-model="it.beginDateSchool"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始时间"
              >
              </el-date-picker>
              <p>—</p>
              <el-date-picker
                v-model="it.endDateSchool"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束时间"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="semesteFlag = false">取 消</el-button>
        <el-button class="determine" type="primary" @click="editSchoolYearBtn"
          >确 定</el-button
        >
      </div>
      <transition name="fade">
        <p class="message" v-if="isShowMsg">信息不能为空</p>
      </transition>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSchoolYearApi,
  removeSchoolYearApi,
  addSchoolYearApi,
  editSchoolYearSwitchApi,
  editSchoolYearApi,
  addSchoolYearItemApi
} from "../../api/educational/schoolYear";
export default {
  name: "schoolYear",
  data() {
    return {
      form: {
        birthdayName: "",
      },
      // 搜索输入框内容
      searchInput: "",
      tableData: [],
      currentPage3: 0,
      // 弹框开关
      isSchoolYearFlag: false,
      semesteFlag: false,
      // 学年名称
      schoolYearValue: "",
      // 提示信息开关
      isShowMsg: false,
      // 添加弹框开关
      isInfoSemesterFlag: false,
      // 点击新增数据
      semesterNameArr: [
        {
          endDateSchool:'',
          remarkSchool:'',
          beginDateSchool:''
        }
      ],
      schoolYearStr: "", // 拼接学年学期
      ids: "", // 拼接选中删除的id
      // isSchoolYearOrSemesterTitle: false
      schoolOrSemester: "", // 修改弹框学期名称
      addSchoolOrSemester: "", //新增弹框学期名称
      editSchoolSemester: [], //  修改弹框数据
      editItem: "", // 修改那一条的学年学期
      total: 0, // 数据总数
      isLoading: false, // loading
      infoSemester:{
        remarkSchool:'',
        beginDateSchool:'',
        endDateSchool:''
      },
      infoSemesteFlag:false, // 添加学期弹框
    };
  },
  mounted() {
    this.getSchoolYearList();
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳到第";
    // getSchoolYearApi({}).then((res)=>{
    //   console.log(res);
    // })
  },
  methods: {
    infoSemesterDetail() {
      let obj = {
        schoolYearId:this.editItem.id,
        beginDateSchool:this.infoSemester.beginDateSchool,
        remarkSchool:this.infoSemester.remarkSchool,
        endDateSchool:this.infoSemester.endDateSchool,
      }
      
      addSchoolYearItemApi(obj).then(res=>{
        console.log(res,'--');
        if(res.code === 200) {
          this.$message({
            type: "success",
            message: "添加学期成功",
          });
          let obj1 = {
            beginDateSchool:this.infoSemester.beginDateSchool,
            remarkSchool:this.infoSemester.remarkSchool,
            endDateSchool:this.infoSemester.endDateSchool,
          };
          this.editSchoolSemester.push(obj1);
          this.infoSemesteFlag = false
        }else {
           this.$message({
            type: "error",
            message: "添加学期失败",
          });
          
        }
      })

    },
    removeSchool(index) {
      console.log(index);
      console.log(this.semesterNameArr);
      this.semesterNameArr.forEach((item,i)=>{
        console.log(item);
        if(i == index) {
          this.semesterNameArr.splice(i,1)
        }
      })
    },
    getRowClassName({ row }) {
      let classname = "autofix-table-row ";
      // 通过判断给不需要展开行功能的数据设置样式，通过样式去隐藏展开行图标
      if (row.schoolSemester.length <= 0) {
        classname+=' hide-expand'
      }
      return classname;
    },
    toggleRowExpansion(row) {
      console.log(row,334);
      // 符合条件的才触发toggleRowExpansion方法
      if (row.schoolSemester.length >0) {
        this.$refs.expandTable.toggleRowExpansion(row);
      }
    },
    formatStr(str) {
      if (str) {
        console.log(str);

        return `${str.substr(0, 4)}年${str.substr(5, 2)}月${str.substr(
          8,
          2
        )}日`;
      } else {
        return "";
      }
    },
    // 批量删除
    removeSchoolYear() {
      this.$confirm("确认删除记录吗?", "提示", {
        type: "warning",
      }).then(() => {
        removeSchoolYearApi({ ids: this.ids }).then((res) => {
          if (res.code === 500) {
            this.$message({
              type: "error",
              message: "删除失败，请检查是否有选择节点",
            });
          } else {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.getSchoolYearList();
          }
        });
      });
    },

    // 表格选中事件
    selectionChange(val) {
      var arrTostring = [];
      val.forEach((item) => {
        if (arrTostring.indexOf(item.id) === -1) {
          arrTostring.push(item.id);
        }
      });
      this.ids = arrTostring.toString();
    },

    // 获取学年学期列表
    async getSchoolYearList(obj) {
      this.isLoading = true;
      const data = await getSchoolYearApi({
        ...obj,
        pageSize: "10",
        pageNum: this.currentPage3,
      });
      data.rows.forEach((item) => {
        item.schoolYearStr = item.schoolYearName + item.timeSolt;
      });
      if (data.code === 200) {
        this.isLoading = false;
        this.total = data.total;
        this.tableData = data.rows;
        // this.tableData1 =
      }
    },
    // 修改信息的确定按钮
    editSchoolYearBtn() {
      this.semesteFlag = false;
      // console.log(this.editSchoolSemester,'editSchoolSemester----');
      // // let obj = {

      // // }
      // console.log(this.editItem);
      // addSchoolYearItemApi({id:this.editItem.id}).then(res=>{
      //   console.log(res,'--');
      // })
      let obj = {
        schoolSemester: this.editSchoolSemester,
        id: this.editItem.id,
        // timeSolt:this.addSchoolOrSemester,
        schoolYearName: this.schoolYearValue,
        beginDate: this.editSchoolSemester[0].beginDateSchool,
        endDate: this.editSchoolSemester[this.editSchoolSemester.length - 1].endDateSchool
      };
      console.log(obj);
      editSchoolYearApi(obj).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          this.getSchoolYearList();
        } else {
          this.$message({
            type: "error",
            message: "修改失败",
          });
        }
      });
    },
    // 修改信息中的新增学期
    editInfoAddSemester() {
      this.infoSemesteFlag = true
      this.isInfoSemesterFlag = true;
      // let obj = {
      //   endDateSchool: "",
      //   beginDateSchool: "",
      // };
      // this.editSchoolSemester.push(obj);
    },

    // 转换时间戳
    // initTime(importTime) {
    //   var date = new Date(importTime);
    //   var time1 = date.getTime();
    //   return time1;
    // },
    // 点击修改需要获取数据循环渲染，目前数据结构有待调整
    handleEdit(row) {
      console.log(row);
      this.editItem = row;
      this.editSchoolSemester = JSON.parse(JSON.stringify(row.schoolSemester));
      this.semesteFlag = true;
      this.semesterNameArr = row.schoolSemester;
      this.schoolYearValue = row.schoolYearName;

      // this.editSchoolSemester.forEach((item, index) => {
      //   this.$set(
      //     this.editSchoolSemester[index],
      //     "beginDateSchool",
      //     this.initTime(item.beginDateSchool)
      //   );
      //   this.$set(
      //     this.editSchoolSemester[index],
      //     "endDateSchool",
      //     this.initTime(item.endDateSchool)
      //   );
      // });
    },
    // 弹框中新增学年按钮
    addSemester() {
      this.isInfoSemesterFlag = true;
      let obj = {
        endDateSchool: "",
        beginDateSchool: "",
      };
      this.semesterNameArr.push(obj);
    },

    // 添加学期学年确定按钮
    addSchoolYearBtn() {
      console.log(this.semesterNameArr);
      // let obj = {
      //   schoolSemester:this.semesterNameArr ? this.semesterNameArr : [],
      //   timeSolt: this.addSchoolOrSemester,
      //   schoolYearName: this.schoolYearValue,
      //   beginDate: this.semesterNameArr[0].beginDateSchool,
      //   endDate: this.semesterNameArr[this.semesterNameArr.length - 1].endDateSchool
      // }
      // console.log(this.semesterNameArr)
      // console.log(obj);
      var obj1 = {
        schoolSemester: this.semesterNameArr ? this.semesterNameArr : [],
        timeSolt: this.addSchoolOrSemester,
        schoolYearName: this.schoolYearValue,
        // beginDate: this.beginDateSchool,
        beginDate: this.semesterNameArr[0].beginDateSchool,
        endDate: this.semesterNameArr[this.semesterNameArr.length - 1].endDateSchool
      };
      let filterItme = obj1.schoolSemester.every((item) => {
        console.log(item);
        return (
          item.endDateSchool &&
          item.remarkSchool !== "" &&
          item.beginDateSchool !== ""
        );
      });
      console.log(obj1.schoolYearName);
      let a = this.tableData.some((item) => {
        return item.schoolYearName == this.schoolYearValue;
      });
      if (a) {
        this.$message({
          type: "warning",
          message: "已存在该学期，请检查后重新填写",
        });
      } else{
        if (filterItme) {
          addSchoolYearApi(obj1).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "添加成功",
              });
              this.isSchoolYearFlag = false;
            } else {
              this.$message({
                type: "error",
                message: "添加失败",
              });
            }
            this.getSchoolYearList();
          });
        }else {
        this.$message({
          type: "error",
          message: "请填写完整信息",
        });
      }
        
      } 
    },

    // 添加学年学期
    addCollege() {
      this.isSchoolYearFlag = true;
      this.schoolYearValue = "";
      this.semesterNameArr = [
        {
          endDateSchool:'',
          remarkSchool:'',
          beginDateSchool:''
        }
      ];
    },

    // 开关事件
    switchChange(row) {
      console.log(row);
      editSchoolYearSwitchApi({ id: row.id, status: row.status }).then(
        (res) => {
          console.log(res);
          if(res.code === 200) {
            this.$message({
              type: "success",
              message: "修改成功",
            });
          }else{
             this.$message({
              type: "error",
              message: "修改失败",
            });
          }
          this.getSchoolYearList();
        }
      );
    },

    // 搜索按钮
    searchBtn() {
      console.log(this.searchInput, "-----------searchInput");
      this.getSchoolYearList({schoolYearName:this.searchInput});
    },

    // 重置按钮
    refreshBtn() {
      this.searchInput = "";
      this.getSchoolYearList();
    },

    // 分页  事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getSchoolYearList();
    },
    // 单个删除
    handleDelete(row) {
      console.log(row);
      this.$confirm("确认删除记录吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          removeSchoolYearApi({ ids: row.id }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getSchoolYearList();
            } else {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.schoolYear {
  min-width: 100vh;
  width: 100%;
  height: 100%;
  padding: 0 20px 20px 15px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  button {
    border: none;
  }
  .schoolYear-top {
    height: 85px;
    padding: 0 20px;
    background-color: white;
    .schoolYear-title {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .addSchoolYear {
        width: 300px;
        // margin-left: 20px;
        .newAdd {
          font-weight: 600;
          background-color: rgb(86, 164, 212);
          .el-icon-plus {
            font-weight: 600;
          }
        }
      }
      .searchRight {
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .moreBtn {
          margin-left: 10px;
          display: flex;
          .searchBtn {
            color: white;
            border: none;
            background-color: rgb(123, 180, 208);
          }
          .refreshBtn {
            color: white;
            border: none;
            // margin-right: 10px;
            background-color: rgb(108, 207, 204);
          }
          .moreDelete {
            background-color: rgb(241, 129, 143);
            font-weight: blod;
          }
          // .remove{
          //   margin-right: 10px;
          //   cursor: pointer;

          // }
        }
      }
    }
  }
  .schoolYearContent {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: white;
    .table {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      border: 1px solid rgb(230, 230, 230);
      ::v-deep .cell {
        color: #000;
      }
       ::v-deep .hide-expand .el-table__expand-column .cell {
          visibility: hidden;
        }
      .infoTable {
        width: 55%;
        display: flex;
        justify-content: center;
        align-items: center;
        .time {
          margin-bottom: 10px;
        }
      }
      .schoolOrSemester {
        width: 504px;
      }
      .edit {
        width: 15px;
        height: 15px;
        cursor: pointer;
        color: #1990FF;
        font-weight: bold;
      }
      .del {
        width: 15px;
        height: 15px;
        margin-left: 10px;
        cursor: pointer;
        color: #1990FF;
        font-weight: bold;
      }
    }
  }
  .block {
    width: 100%;
    height: 65px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: right;
    background-color: #fff;

    ::v-deep .btn-prev {
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #6f6f6f;
    }

    ::v-deep .btn-next {
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #6f6f6f;
    }
    ::v-deep .el-pager li {
      background: #fff;
      font-size: 13px;
      min-width: 30.5px;
      height: 28px;
      line-height: 28px;
      box-sizing: border-box;
    }

    ::v-deep .el-pager li.active {
      background-color: #4895db;
      color: #fff;
      cursor: default;
    }
    ::v-deep .number {
      border: solid 1px #e6e6e6;
      margin: 0 5px;
      border-radius: 5px;
      color: #6f6f6f;
    }
    ::v-deep .el-button {
      height: 28px;
      line-height: 0;
    }
    .sure {
      width: 50px;
      height: 30px;
      line-height: 0;
      text-align: center;
      padding: 0;
    }
  }
  ::v-deep .el-dialog {
    width: 780px;
    height: 650px;
    border-radius: 10px;
    text-align: right;
    font-weight: 600;
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.3s;
    }
    .message {
      position: absolute;
      left: 44%;
      top: 50%;
      width: 140px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: #fff;
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .fade-enter,
        .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
    .el-dialog__header {
      border-radius: 10px 10px 0 0;
      text-align: center;
      background-color: rgb(72, 149, 219);
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
      }
    }

    .el-dialog__body {
      height: 500px;
      position: relative;
      .addInput {
        width: 100%;
        height: 150px;
        .schoolYearText {
          width: 50px;
          border-left: 3px solid #4895db;
          .addSchoolYear {
            margin-left: 10px;
            font-weight: 600;
            color: #4995dc;
          }
        }

        .addSchoolYearName {
          width: 100%;
          height: 100px;
          text-align: center;
          // line-height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          .schoolYear-left {
            width: 100px;
            font-weight: 600;
          }
          .el-input {
            width: 300px;
          }
        }
      }
      .semesterInput {
        width: 100%;
        display: flex;
        color: #4995dc;
        align-items: center;
        margin-bottom: 10px;
        justify-content: space-between;
        .semesterText {
          width: 50px;
          border-left: 3px solid #4895db;
        }
        .semester {
          margin-left: 10px;
          font-weight: 600;
          color: #4995dc;
        }
        .addSemester {
          color: #4895db;
          font-weight: 600;
          .el-icon-plus {
            font-weight: 600;
          }
        }
        .addSemester:hover {
          background-color: #fff;
        }
      }
      // .infoSemester::-webkit-scrollbar{
      //       display: none;
      //     }
      .infoSemester {
        width: 100%;
        height: 270px;
        overflow-y: auto;

        .infoSemester-top {
          width: 100%;
          height: 50px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .semesterName {
            width: 250px;
            display: flex;
            align-items: cetner;
            p {
              text-align: left;
              line-height: 40px;
            }
            .el-input {
              width: 170px;
            }
          }
          .semesterTime {
            display: flex;
            align-items: center;
            .date {
              width: 306px;
              display: flex;
              ::v-deep .el-date-editor {
                width: 150px;
              }
              p {
                line-height: 40px;
              }
              .el-input__inner {
                width: 150px;
              }
            }
          }
        }
      }
    }
    .dialog-footer {
      text-align: center;
      margin-top: 15px;
      button {
        width: 100px;
        height: 35px;
        border-radius: 16px;
        line-height: 0;
      }
      button {
        width: 100px;
        height: 35px;
        border-radius: 16px;
        line-height: 0;
      }
      .cancel {
        border: none;
        color: #848383;
        background-color: #f0f0f0;
      }
      .determine {
        border: none;
        background-color: #4995dc;
      }
    }
  }

  ::v-deep .dialog-footer {
    .cancel {
      border: none;
      color: #848383;
      background-color: #f0f0f0;
    }
    .determine {
      border: none;
      background-color: #4995dc;
    }
  }
}
::v-deep .el-dialog {
    width: 780px;
    height: 350px;
    border-radius: 10px;
    text-align: right;
    font-weight: 600;
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.3s;
    }
    .message {
      position: absolute;
      left: 44%;
      top: 50%;
      width: 140px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: #fff;
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.4);
    }
    // .infoSemesterDetail{
    //   height: 100px;
    // }
    .fade-enter,
        .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
    .el-dialog__header {
      border-radius: 10px 10px 0 0;
      text-align: center;
      background-color: rgb(72, 149, 219);
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
      }
    }

    .el-dialog__body {
      height: 200px;
      position: relative;
      .addInput {
        width: 100%;
        height: 150px;
        .schoolYearText {
          width: 50px;
          border-left: 3px solid #4895db;
          .addSchoolYear {
            margin-left: 10px;
            font-weight: 600;
            color: #4995dc;
          }
        }

        .addSchoolYearName {
          width: 100%;
          height: 100px;
          text-align: center;
          // line-height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          .schoolYear-left {
            width: 100px;
            font-weight: 600;
          }
          .el-input {
            width: 300px;
          }
        }
      }
      .semesterInput {
        width: 100%;
        display: flex;
        color: #4995dc;
        align-items: center;
        margin-bottom: 10px;
        justify-content: space-between;
        .semesterText {
          width: 50px;
          border-left: 3px solid #4895db;
        }
        .semester {
          margin-left: 10px;
          font-weight: 600;
          color: #4995dc;
        }
        .addSemester {
          color: #4895db;
          font-weight: 600;
          .el-icon-plus {
            font-weight: 600;
          }
        }
        .addSemester:hover {
          background-color: #fff;
        }
      }
      // .infoSemester::-webkit-scrollbar{
      //       display: none;
      //     }
      .infoSemesterDetail {
        width: 100%;
        height: 140px;
        overflow-y: auto;

        .infoSemesterDetail-top {
          width: 100%;
          height: 50px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .semesterName {
            width: 250px;
            display: flex;
            align-items: cetner;
            p {
              text-align: left;
              line-height: 40px;
            }
            .el-input {
              width: 170px;
            }
          }
          .semesterTime {
            display: flex;
            align-items: center;
            .date {
              width: 306px;
              display: flex;
              ::v-deep .el-date-editor {
                width: 150px;
              }
              p {
                line-height: 40px;
              }
              .el-input__inner {
                width: 150px;
              }
            }
          }
        }
      }
    }
    .dialog-footer {
      text-align: center;
      margin-top: 15px;
      button {
        width: 100px;
        height: 35px;
        border-radius: 16px;
        line-height: 0;
      }
      button {
        width: 100px;
        height: 35px;
        border-radius: 16px;
        line-height: 0;
      }
      .cancel {
        border: none;
        color: #848383;
        background-color: #f0f0f0;
      }
      .determine {
        border: none;
        background-color: #4995dc;
      }
    }
  }

</style>